<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../node_modules/markdown-it-container/dist/markdown-it-container.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();

  /*const blocks = [
    {tag: 'tip', title: '提示'},
    {tag: 'success', title: '提示'},
    {tag: 'warn', title: '注意'},
    {tag: 'error', title: '注意'},
  ];
  blocks.forEach(block => {
    md.use(MarkdownItContainer, block.tag, {
      render(tokens, idx) {
        const token = tokens[idx]
        if (token.nesting === 1) {
          // opening tag
          let [blockName, title] = token.info.trim().split(' ')
          title = title || block.title
          return `<div class="${block.tag} custom-block"> <p class="block-title">${title}</p>`;
        } else {
          // closing tag
          return '</div>\n';
        }
      },
    })
  })*/

  md.use(
    window.markdownitContainer,
    // name - container name (mandatory) // 必须的, 会作为 ::: <name> 的name
    'tip',

    //默认↓的参数不手动定义的话, markdown和html映射关系是这样的↓
    /*
      ::: tip
      *here be dragons*
      :::

      ↑ ↓  If no renderer defined, <div> with container name class will be created:

      <div class="tip">
        <p><em>here be dragons</em></p>
      </div>
    */

    {
      // validate: function(params) {
      //   return params.trim().match(/^tip\s+(.*)$/);
      // },

      //todo 文档用法不是那么全, 看测试用例
      //https://github.com/markdown-it/markdown-it-container/tree/master/test
      //https://github.com/markdown-it/markdown-it-container/blob/master/test/api.js
      render: function (tokens, idx) {
        console.log('markdownitContainer render --- --- ---')
        //会调用两次render, 一次是

        console.log('tokens:', tokens);
        /*
        tokens: (17) [Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token, Token]
                  0: Token {type: "heading_open", tag: "h1", attrs: null, map: Array(2), nesting: 1, …}
                  1: Token {type: "inline", tag: "", attrs: null, map: Array(2), nesting: 0, …}
                  2: Token {type: "heading_close", tag: "h1", attrs: null, map: null, nesting: -1, …}
                  3: Token {type: "container_tip_open", tag: "div", attrs: null, map: Array(2), nesting: 1, …}
                  4: Token {type: "bullet_list_open", tag: "ul", attrs: null, map: Array(2), nesting: 1, …}
                  5: Token {type: "list_item_open", tag: "li", attrs: null, map: Array(2), nesting: 1, …}
                  6: Token {type: "paragraph_open", tag: "p", attrs: null, map: Array(2), nesting: 1, …}
                  7: Token {type: "inline", tag: "", attrs: null, map: Array(2), nesting: 0, …}
                  8: Token {type: "paragraph_close", tag: "p", attrs: null, map: null, nesting: -1, …}
                  9: Token {type: "list_item_close", tag: "li", attrs: null, map: null, nesting: -1, …}
                  10: Token {type: "list_item_open", tag: "li", attrs: null, map: Array(2), nesting: 1, …}
                  11: Token {type: "paragraph_open", tag: "p", attrs: null, map: Array(2), nesting: 1, …}
                  12: Token {type: "inline", tag: "", attrs: null, map: Array(2), nesting: 0, …}
                  13: Token {type: "paragraph_close", tag: "p", attrs: null, map: null, nesting: -1, …}
                  14: Token {type: "list_item_close", tag: "li", attrs: null, map: null, nesting: -1, …}
                  15: Token {type: "bullet_list_close", tag: "ul", attrs: null, map: null, nesting: -1, …}
                  16: Token {type: "container_tip_close", tag: "div", attrs: null, map: null, nesting: -1, …}
                  length: 17
                  [[Prototype]]: Array(0)

        */
        console.log('idx:', idx);
        //idx: 3   --->    3: Token {type: "container_tip_open", tag: "div", attrs: null, map: Array(2), nesting: 1, …}
        //idx: 16  --->   16: Token {type: "container_tip_close", tag: "div", attrs: null, map: null, nesting: -1, …}

        // var m = tokens[idx].info.trim().match(/^tip\s+(.*)$/);
        // console.log('m:',m);

        const token = tokens[idx]

        if (tokens[idx].nesting === 1) { //1表示是开标签 -1表示是关标签 0表示是inline(空行)
          // opening tag
          // return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';


          let [blockName, title] = token.info.trim().split(' ')

          return `<div class="tip custom-block"> <p class="block-title">${title}</p>`;

        // 因为本render只会在 container_tip_open 和 container_tip_close 时调用, 故这里一定是关标签
        } else {
          // closing tag
          // return '</details>\n';

          return '</div>\n';
        }
      }
      // Output:
      //
      // <details><summary>click me</summary>
      // <p><em>content</em></p>
      // </details>
    }
  )

  const text =
`
# markdown-it-container.html

:::tip 自动滚动
- 调用组件的方法，开始自动滚动；
- 如果滚动的过程中，发生了其他滚动动作（鼠标滚动或者其他滚动调用），则会停止自动滚动；
:::
`
  var result = md.render(text);

  console.log('result:',result);
  markdownbox.innerHTML = result;
</script>
</body>
</html>
